import React, { Component, PropTypes } from 'react';
import CompactInput from 'components/compact-input'
import { Input, InputNumber, Select } from 'antd';
import { messages, deepFullCopy, queryCurrencyPrecision, currencyPrecisionCal } from "share/common";
import { connect } from "react-redux";
const Option = Select.Option;
import travelService from 'containers/request/travel-request/travel.service'
import errorMessage from 'share/errorMessage';

class ExpenseAmount extends Component {
  state = {
    selectScene: null,
    currentScenes: []
  };

  componentDidMount() {
    const { value } = this.props;
    this.setValue(this.props.value);
    this.initScenes();
  }

  componentWillReceiveProps(nextProps) {
    if('value' in nextProps) {
      this.setValue(nextProps.value)
    }
  }

  //初始化用餐类型可选范围
  initScenes = () => {
    const { formOID } = this.props;
    travelService.getDiningScene(formOID).then(res => {
      this.setState({currentScenes: res.data || []});
    }).catch(e => {
      errorMessage(e.response);
    });
  };

  setValue = value => {
    this.setState({selectScene: value});
  };

  dispatchOnChange = () => {
    const { selectScene } = this.state;
    const { onChange } = this.props;
    onChange && onChange(selectScene);
  };

  //选择规则
  selectScene = (e, opt) => {
    this.setState({selectScene: opt.props['data-scene']}, this.dispatchOnChange);
  };

  render() {
    const { selectScene, currentScenes } = this.state;
    const { disabled } = this.props;
    return (
      <div className="normal-width">
        <Select
          placeholder={messages('common.select')/*请选择*/}
          value={(selectScene && selectScene.id) ? selectScene.id : undefined}
          onSelect={(e, opt) => this.selectScene(e, opt)}
          getPopupContainer={triggerNode => triggerNode.parentNode}
          disabled={disabled}
        >
          {currentScenes.map(scene => {
            return (
              <Option data-scene={scene} value={scene.id}>
                {scene.name}
              </Option>
            );
          })}
        </Select>
        {selectScene && (
          <div style={{color: '#999999'}}>
            {messages('request-1.key377')/*有效时间：*/}
            {selectScene.durationType === 1 ? messages('request-1.key378')/*全天*/ : `${selectScene.startTime} - ${selectScene.endTime}`}
            &nbsp;&nbsp;&nbsp;
            {messages('request-1.key379')/*用餐频次：*/}
            {selectScene.frequency === 1002 ? messages('request-1.key380')/*每天*/ : messages('request-1.key381')/*单次*/}
          </div>
        )}
      </div>
    );
  }

  static propTypes = {
    onChange: PropTypes.func,
    formOID: PropTypes.string, //要查询哪个表单下的用餐类型
    disabled: PropTypes.bool
  };

  static defaultProps = {
    onChange: () => {},
    formOID: '',
    disabled: false
  };
}

function mapStateToProps(state) {
  return {
    language: state.main.language,
    company: state.login.company, //申请人所在公司
    user: state.login.user, //申请人
  }
}

export default connect(mapStateToProps)(ExpenseAmount);
